<template>
	<view class="padding-rpx_25">
		<view class="bgColor_ffffff border-radius-rpx_10 padding-rpx_25">
			<view class="flex_row_c_c">
				<text class="QS-text weight">示例</text>
			</view>
			<QS-P></QS-P>
			<QS-Button theme="primary" autoEmitQuery @emitQuery="emitQuery">以QS-Button为例</QS-Button>
			<QS-P></QS-P>
			<text class="QS-text color_808080 word-break_break-all">QS-Button布局信息为:</text>
			<text class="QS-text color_808080 word-break_break-all">{{JSON.stringify(btnQuery, null, 4)}}</text>
			<QS-P></QS-P>
			<text class="QS-text color_808080 word-break_break-all">{{info}}</text>
		</view>
		<QS-BackTop setContext></QS-BackTop>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnQuery: {},
				info: `emitQuery为QS组件公共功能, 只要传autoEmitQuery为true, 后@emitQuery可以自动获取组件布局信息`
			}
		},
		methods: {
			emitQuery(data) {
				this.btnQuery = data;
			}
		}
	}
</script>

<style>

</style>
